<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '../../store/useStore';
const store = useStore()
console.log(store.info);

const router = useRouter()
const radarCanvas = ref(null);
const data = ref([
    {
        icon: 'https://img0.baidu.com/it/u=702472866,528586816&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380',
    }
])
let ctx = null;
let animationFrameId = null;
let rotationAngle = 0; // 旋转角度
//边框
const borderWidth = 1;
// 假设的用户点数据  
const centerX = 150;
const centerY = 150;
const lineLength = 150; // 线的长度 
const innerCircleRadius = 100; // 内部小圆的半径  
// 尾迹线的数量  
const trailLines = 10;
// 存储每条尾迹线的位置和透明度  
const trailPositions = [];
// 绘制尾迹线  
function drawTrail() {
    for (let i = 0; i < trailLines; i++) {
        let alpha = 1 - (i / trailLines); // 计算透明度，从1递减到0  
        if (!trailPositions[i]) {
            // 如果这个位置还没有数据，就使用当前线的位置  
            trailPositions[i] = {
                x: centerX + Math.cos(rotationAngle - i * 0.1) * lineLength,
                y: centerY + Math.sin(rotationAngle - i * 0.1) * lineLength
            };
        }
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(trailPositions[i].x, trailPositions[i].y);
        ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`; // 使用RGBA来设置透明度  
        ctx.lineWidth = 1;
        ctx.stroke();
        trailPositions[i] = {
            x: centerX + Math.cos(rotationAngle - (i + 1) * 0.1) * lineLength,
            y: centerY + Math.sin(rotationAngle - (i + 1) * 0.1) * lineLength
        };
    }
}
//半径
function drawCircle(x, y, radius, fillColor = 'rgba(0, 0, 0, 0)', strokeColor = '#000') {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillStyle = fillColor; // 填充颜色，默认为透明  
    ctx.strokeStyle = strokeColor; // 边框颜色  
    ctx.lineWidth = borderWidth; // 边框宽度  
    ctx.stroke(); // 绘制边框  
    if (fillColor !== 'rgba(0, 0, 0, 0)') { // 如果不是透明，则填充内部  
        ctx.fill();
    }
}
// 绘制雷达图和旋转的线  
function drawRadar() {
    if (!ctx) return;
    ctx.clearRect(0, 0, 300, 300); // 清除整个Canvas  
    drawCircle(centerX, centerY, innerCircleRadius, 'rgba(255, 255, 255, 0.0)', '#fff'); // 假设你想要一个有半透明填充的大圆  

    drawTrail(); // 绘制尾迹线
    // 绘制内部小圆  
    const smallInnerCircleRadius = 50; // 更小的圆的半径  
    drawCircle(centerX, centerY, smallInnerCircleRadius, 'rgba(0, 0, 0, 0)', '#fff'); // 一个没有填充只有边框的小圆  
    // 绘制旋转的线  
    ctx.beginPath();
    ctx.moveTo(centerX, centerY); // 起点为中心点  
    ctx.lineTo(
        centerX + Math.cos(rotationAngle) * lineLength, // 计算终点的x坐标  
        centerY + Math.sin(rotationAngle) * lineLength // 计算终点的y坐标  
    );
    ctx.strokeStyle = '#fff'; // 线的颜色  
    ctx.lineWidth = 1; // 线的宽度  
    ctx.stroke(); // 绘制线  


}


// 旋转控制  
function startRotation() {
    if (!animationFrameId) {
        animationFrameId = requestAnimationFrame(rotate);
    }
}

function stopRotation() {
    if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
    }
}

function rotate() {
    rotationAngle += 0.03; // 每次动画增加一定的旋转角度（弧度）  
    if (rotationAngle >= 2 * Math.PI) {
        rotationAngle = 0; // 重置旋转角度以实现无限循环  
    }
    drawRadar(); // 绘制旋转后的雷达图（实际上只绘制了旋转的线）  
    animationFrameId = requestAnimationFrame(rotate); // 递归调用以持续动画  
}
const btn = () => {
    router.back()
}
onMounted(() => {
    if (radarCanvas.value) {
        ctx = radarCanvas.value.getContext('2d');
        drawRadar(); // 初始绘制  
    }

    startRotation()
});
onUnmounted(() => {
    stopRotation();
}); 
</script>

<template>
    <div class="top">
        <div class="top1">
            <img :src="store.info.avatar"
                alt="">
        </div>
        <button @click="btn">退出</button>
        <div class="radar-container">
            <canvas ref="radarCanvas" width="300" height="300" class="rader"></canvas>

        </div>
    </div>
</template>

<style scoped>
.top1 {
    position: fixed;
    top: 42.5%;
    left: 41.8%;
}

.top1 img {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 3px solid #fff;
}

.top {
    width: 100%;
    height: 100%;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201409%2F26%2F20140926000630_VkmCu.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1727013561&t=cde9dde1584b66aa09e8037f751c4369');
    background-repeat: no-repeat;
    background-size: cover;
}

button {
    width: 60px;
    height: 30px;
    margin-top: 30px;
    margin-left: 30px;
    background-color: rgb(32, 36, 69);
    color: #b6b4b4;
    border: 1px solid #b6b4b4;
}

.rader {
    text-align: center;
    border: 1px solid #fff;
    border-radius: 150px;
    margin-top: 100px;
}

.radar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>